<template>
  <div class="dynamicColor">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
// 加载 Cesium
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
var viewer // 视图
export default {
  mounted() {
    this.initHandle()
  },
  methods: {
    /* *********************初始化 start********************* */
    initHandle() {
      var viewerOption = {
        homeButton: false,
        // sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        vrButton: false
      }
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjA2ZDQ2ZS02NTA4LTQ2NTItODE1My1kZjE3MjBkMjFkNzAiLCJpZCI6NDM5NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MDcyNzI4Nn0.L7P8pJponZfYjdsGnEw2hIHd2AN0h-SuYl6XvzOwLeA'
      viewer = new Cesium.Viewer('cesiumContainer', viewerOption)

      // 隐藏 LOGO 版权
      viewer._cesiumWidget._creditContainer.style.display = 'none'

      // 去掉entity的点击事件 start
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 去掉entity的点击事件 end

      // 加载底图
      viewer.imageryLayers.addImageryProvider(
        new Cesium.SingleTileImageryProvider({
          url: require('../../../images/worldimage.jpg')
        })
      )

      // 每次显示不同的颜色
      var randomColor = new Cesium.CallbackProperty(function(time, result) {
        return Cesium.Color.fromRandom({ alpha: 1.0 }, result)
      }, false)

      var entity = viewer.entities.add({
        name: 'Red box with black outline',
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        box: {
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
          material: new Cesium.ColorMaterialProperty(randomColor)
        }
      })

      function createDescriptionCallback() {
        var description = 'Hello,World, '
        return function(time, result) {
          return description + time.toString()
        }
      }

      entity.description = new Cesium.CallbackProperty(createDescriptionCallback(), true)

      Property.getValueOrUndefined(entity.description, time)

      viewer.zoomTo(viewer.entities)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
